<template>
  <div class="v-table">
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      :data="rows"
      stripe
      v-loading="loading"
      ref="table"
      @sort-change="onSortChange"
      size="mini"
      :max-height="height"
      :height="height"
      border
    >
      <template v-for="(col, key) in columns">
        <slot v-if="col.slot" :name="col.slot"></slot>
        <el-table-column
          v-else
          v-bind="col"
          show-overflow-tooltip
          :key="key"
        ></el-table-column>
      </template>
      <slot></slot>
    </el-table>
    <el-pagination
      v-if="totalCount > 0"
      class="v-pagination"
      :current-page="pageIndex"
      background
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @current-change="onPageChange"
      @size-change="onSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    rows: {
      type: Array,
      default: () => [],
    },
    "page-index": {
      type: Number,
      default: 1,
    },
    "page-sizes": {
      type: Array,
      default: () => [1, 10, 15, 30, 50, 100],
    },
    "page-size": {
      type: Number,
      default: 10,
    },
    "total-count": {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    columns: {
      required: false,
      type: Array,
      default: () => [],
    },
    "order-by": {
      type: String,
      default: "",
    },
    desc: {
      type: Boolean,
      default: true,
    },
    "auto-height": {
      type: Boolean,
      default: true,
    },
    // height: {
    //   type: Number,
    //   default: 300,
    // },
  },
  data() {
    return {
      height: 400,
    };
  },
  methods: {
    onSortChange(e) {
      console.log(e);
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        orderBy: e.prop,
        desc: e.order == "descending",
      };
      if (e.column.sortable == "custom") this.$emit("change", params);
    },
    onPageChange(currentPage) {
      this.$emit("update:pageIndex", currentPage);
      let params = {
        pageIndex: currentPage,
        pageSize: this.pageSize,
        orderBy: this.orderBy,
        desc: this.desc,
      };
      this.$emit("change", params);
    },
    onSizeChange(pageSize) {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: pageSize,
        orderBy: this.orderBy,
        desc: this.desc,
      };
      this.$emit("change", params);
    },
    toggleRowSelection(row, select) {
      return this.$refs.table.toggleRowSelection(row, select);
    },
    clearSelection() {
      return this.$refs.table.clearSelection();
    },
    onWindowResize() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          let height =
            document.body.clientHeight -
            this.$refs.table.$el.getBoundingClientRect().top -
            70;
          this.height = height;
        }
      });
    },
  },
  mounted() {
    if (this.autoHeight) {
      window.addEventListener("resize", this.onWindowResize, true);
      this.onWindowResize();
    }
  },
  beforeDestroy() {
    this.autoHeight &&
      window.removeEventListener("resize", this.onWindowResize);
  },
};
</script>
<style>
.v-table {
  color: #666;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.v-table .el-table .el-table__fixed-header-wrapper th,
.v-table .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9;
  word-break: break-word;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.v-table .el-table .cell {
  word-break: break-word;
}

.v-table .el-table .caret-wrapper {
  width: 15px;
}

.v-table .el-table .sort-caret {
  left: 2px;
}

.v-table i[type] {
  cursor: pointer;
  font-size: 16px;
  margin-right: 5px;
}

.v-table .el-image .el-icon-circle-close {
  color: #ffffff;
}

.v-table .el-image {
  vertical-align: middle;
}

.v-table i[type="primary"] {
  color: #63a4c9;
}

.v-table i[type="info"] {
  color: #33cdf2;
}

.v-table i[type="danger"] {
  color: #f78776;
}

.v-table i[type="success"] {
  color: #63a4c9;
}

/*
  .v-table .el-table--mini,
  .v-table .el-table--small,
  .v-table .el-table__expand-ic {
    font-size: 13px
  } */
</style>
<style scoped>
.v-table .el-table {
  color: #393939;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-right: none;
  /* font-size: 13px; */
}

.v-table .el-table--border td,
.v-table .el-table--border th,
.v-table
  .el-table__body-wrapper
  .el-table--border.is-scrolling-left
  ~ .el-table__fixed {
  /* border-right: 1px solid #ddd; */
}

.v-table .el-table td,
.v-table .el-table th.is-leaf {
  /* border-bottom: 1px solid #ddd; */
}

.v-table .v-pagination {
  text-align: right;
  margin-top: 10px;
}

/*  .el-table--mini,
  .el-table--small,
  .el-table__expand-ic {
    font-size: 14px
  } */
</style>
